@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

@function px2em($px, $base-font-size:75px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2em($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }

  @return ($px / $base-font-size) * 1rem;
}

body{
  //font: 400 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
  -moz-user-select: none;
  margin: 0 auto;
}

ul,h1,h2,h3,h4,h5,h6{
  margin:0;
  padding:0; /*控制好slider*/
}

/*header.banner {*/
/*width: 100%;*/
/*min-height: 64px;*/
/*height: 30.24%;*/
/*background: #fff5b8;*/
/*}*/

/*.banner img {*/
/*width: 100%;*/
/*}*/

/*图片轮播*/
.sl-container{
  width: 100%;
  height:30.24%;
}

.slider-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slider-list {
  display: -webkit-box;
  display: -moz-box;
  width: 100%;
  height: 100%;
}

.slider-item {
  width: 100%;
  list-style: none;
}

.slider-item a {
  display: block;
}

.slider-item img {
  width: 100%;
}

.transitionable {
  -webkit-transition: all 0.3s ease-in-out;
}

.slider-page {
  width: 100%;
  position: absolute;
  bottom: 5px;
  left: 0;
  text-align: center;
}

.slider-page ul {
  display: inline-block;
  text-align: center;
}

.slider-page ul li {
  display: inline-block;
  vertical-align: top;
  width: 8px;
  height: 8px;
  margin: 8px 5px 0px 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
}

.slider-page ul li.active {
  background: #fec827;
}

.img-wrap {
  width: 100%;
  height: 100%;
  //background: #fafafa url("../img/loading.gif") no-repeat center center;
}

/*字体按照1dpr的给, 高宽等按照2dpr标准给*/
.section-title{
  padding-left: px2em(13px);
  margin-top: px2em(13px);
  margin-bottom: px2em(8px);
  font-size: px2em(24px);
}

.loadImg-layer-box {
  position: relative;
  width: 100%;
  height: auto;
  background-size: 100% auto;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -ms-flexbox;
  display: flex;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

.bnb-tag{
  width: 100%;
  height: px2em(498px);
}

.shape{
  -webkit-border-radius: px2em(13px);
  border-radius: px2em(13px);
}

#tleft-tag{
  float: left;
  width: px2em(228px);
  height: px2em(353px);
  margin-left: px2em(13px);
  background-color: #2d8de9;
  background:url("../img/qinzi.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#tmiddle-tag{
  float: left;
  width: px2em(235px);
  height: px2em(353px);
  margin-left: px2em(13px);

  /*兼容性写法Old*/
  display: -webkit-box;
  display: -ms-flexbox;
  /*兼容性写法New*/
  display: -webkit-flex;
  display: flex;

  -webkit-box-orient: vertical;
  flex-direction: column;
}

#tmiddle1-tag, #tmiddle2-tag{
  /*兼容性写法Old*/
  -webkit-flex-box: 1;
  /*兼容性写法New*/
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;

  background-color: #2d8de9;
}

#tmiddle1-tag{
  margin-bottom: px2em(6.5px);

  background:url("../img/cook.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#tmiddle2-tag{
  margin-top: px2em(6.5px);

  background:url("../img/outdoor.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#tright-tag{
  float: left;
  width: px2em(235px);
  height: px2em(498px);

  margin-left: px2em(13px);

  /*兼容性写法Old*/
  display: -webkit-box;
  display: -ms-flexbox;
  /*兼容性写法New*/
  display: -webkit-flex;
  display: flex;

  -webkit-box-orient: vertical;
  flex-direction: column;
}

#tright-tag1{
  height: px2em(170px);

  background:url("../img/handicrafts.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#tright-tag2{
  margin-top: px2em(13px);

  /*兼容性写法Old*/
  -webkit-flex-box: 2;
  /*兼容性写法New*/
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;

  background:url("../img/couple.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#tbottom-tag{
  float: left;
  position: absolute;
  margin-left: px2em(13px);
  margin-top: px2em(367px);
  width: px2em(478px);
  height: px2em(132px);

  /*兼容性写法Old*/
  display: -webkit-box;
  display: -ms-flexbox;
  /*兼容性写法New*/
  display: -webkit-flex;
  display: flex;

  -webkit-box-orient: horizontal;
  flex-direction: row;

  background:url("../img/countryside.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.activity-container, .recommend-bnb-container, .hot-share-container{
  width: 100%;
  height: px2em(320px);
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.products-container{
  width: 100%;
  height: px2em(350px);
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.activity-container::-webkit-scrollbar, .recommend-bnb-container::-webkit-scrollbar,
.products-container::-webkit-scrollbar, .hot-share-container::-webkit-scrollbar{
  display: none;
}

.activity, .recommend-bnb, .hot-share{
  float: left;
  height: px2em(320px);
  width: px2em(982px);
  margin-left: px2em(13px);
  margin-right: px2em(13px);
  list-style: none;
}

.products{
  float: left;
  height: px2em(350px);
  width: px2em(834px);
  margin-left: px2em(13px);
  margin-right: px2em(13px);
  list-style: none;
}

.activity-item, .recommend-bnb-item, .hot-share-item{
  float: left;
  position: relative;
  width: px2em(478px);
  height: px2em(320px);
  margin-right: px2em(13px);
}

.product-item{
  float: left;
  position: relative;
  width: px2em(265px);
  height: px2em(350px);
  margin-right: px2em(13px);
}

.product-item .head{
  height:px2em(34px);
  line-height: px2em(34px);
  overflow: hidden;
  vertical-align: middle;
  margin-bottom: px2em(6.5px);
}

.product-item .head .price{
  display: inline-block;
  height:px2em(30px);
  line-height: px2em(30px);
  font-size: px2em(30px);
  color: #ff5537;
  vertical-align: middle;
  margin-right: px2em(8px);
}

.product-item .head .category{
  display: inline-block;
  height:px2em(30px);
  line-height: px2em(30px);
  font-size: px2em(22px);
  color: #ffffff;
  background-color: #ffb401;
  vertical-align: middle;
  padding-left: px2em(10px);
  padding-right: px2em(10px);
  border-radius: px2em(10px);
  margin-bottom: px2em(5px);
}

.product-item .title{
  color:#8f8f8f;
  font-size: px2em(25px);
  margin-bottom: px2em(13px);
}

.product-item .pic{
  width: 100%;
  height: px2em(269px);
}

.product-item .pic img{
  width: 100%;
  height: 100%;
}

.activity-item .pic, .recommend-bnb-item .pic, .hot-share-item .pic{
  width: 100%;
  height: 100%;
}

.activity-item .pic img, .recommend-bnb-item .pic img, .hot-share-item .pic img{
  width: 100%;
  height: 100%;
}

.arrow{
  position: absolute;
  height:px2em(42px);
  width: px2em(116px);
}

.activity-color{
  background-color: #fec926;
}

.recommend-bnb-color{
  background-color: #448aca;
  color: #ffffff;
}

.hot-share-color{
  background-color: #f29c9f;
}

.rectangle{
  position: absolute;
  margin-top: px2em(21px);
  height: px2em(42px);
  width: px2em(88px);
  text-align: right;
  vertical-align: middle;
  line-height: px2em(42px);
  font-size: px2em(25px);
}

.activity-tricolor{
  border-top: px2em(22px) solid transparent;
  border-bottom: px2em(22px) solid transparent;
  border-left: px2em(33px) solid #fec926;
}

.recommend-bnb-tricolor{
  border-top: px2em(22px) solid transparent;
  border-bottom: px2em(22px) solid transparent;
  border-left: px2em(33px) solid #448aca;
}

.hot-share-tricolor{
  border-top: px2em(22px) solid transparent;
  border-bottom: px2em(22px) solid transparent;
  border-left: px2em(33px) solid #f29c9f;
}

.triangle{
  position: absolute;
  width: 0px;
  height: 0px;
  margin-left: px2em(87px);
  margin-top: px2em(20px);
}

.tag-title-left{
  display: inline-block;
  font-size: px2em(20px);
  padding-left: px2em(4px);
  color: #ffffff;
  margin-left: px2em(13px);
  margin-top: px2em(13px);
  height: px2em(30px);
  line-height: px2em(33px);
  background-color:rgba(0,0,0,0.2);
}

.tag-title-right{
  display: inline-block;
  font-size: px2em(25px);
  color: #ffffff;
  margin-top: px2em(13px);
  height: px2em(30px);
  line-height: px2em(30px);
  padding-left: px2em(10px);
  padding-right: px2em(4px);
  background-color:rgba(0,0,0,0.2);
}

.description{
  position: absolute;
  color: #ffffff;
  font-size: px2em(20px);
  width: px2em(324px);
  height: px2em(52px);
  line-height: px2em(27px);
  margin-top: px2em(16px);
  padding-left: px2em(15px);
  padding-right: px2em(10px);
  right: 0;
  white-space: normal;
  word-break: break-all;
  background:black;
  background-color:rgba(0,0,0,0.1);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp:2;
  text-overflow: ellipsis;
}